﻿
<!--<link rel="stylesheet" href="../../../bootstrap/css/bootstrap-datepicker.min.css">-->
<link rel="stylesheet" href="../../../bootstrap/css/bootstrap-datetimepicker.min.css">
<style>
	.imgBtn{
		display: inline;
		padding: 12px;
		width: 75px;
		height: 35px;
		line-height: 35px;
		border: 1px solid #23c6c8;
		background: #23c6c8;
		color: #fff;
		text-align: center;
		font-size: 14px;
		border-radius: 3px;
		overflow: hidden;
		position: relative;
		vertical-align: center;
	}
	.imgBtn:hover{
		border: 1px solid #23babc;
		background: #23BABC;
	}
	.imgBtn input{
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}


</style>

<div class="row">
	<div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
		<div class="add-group">
<!--			<a class="ad-btn" data-toggle="modal" data-target="#exampleModalLong" @click="openAdd">添加</a>-->
		</div>
	</div>
</div>


<div class="modal fade" id="exampleModalLong" tabindex="3"  aria-labelledby="exampleModalLongTitle" aria-hidden="true">
	<div class="modal-dialog"  >
		<div class="modal-content" style="width:120%">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle" >{{modalTitle}}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form>
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >消费日期：</label>
							<div class="col-md-10">
								<input data-date-format="yyyy-mm-dd"
									   class="form-control" id="datepicker">
							</div>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >项目：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="col-md-10">
								<select class="form-control" v-model="projectVal" >
									<option v-for="obj in proList" :value="obj">{{obj.name}}</option>
								</select>
							</div>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >金额：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="col-md-10">
								<input type="text"  v-model="expenditure.price"
									   class="form-control"   placeholder="请输入金额:">
							</div>
						</div>
						<div class="form-group row"  >
							<label style="display:inline;margin-top: 3%" >账单照片：</label>
							<div class="col-md-10">
								<label class="imgBtn" style="display: inline;padding: 12px;width: 75px;height: 35px;
								line-height: 35px;border: 1px solid #23c6c8;background: #23c6c8;color: #fff;text-align:
								center;font-size: 14px;border-radius: 3px;overflow: hidden;
								position: relative;vertical-align: center;">
									<span id="selects">选择照片</span>
									<input type="file" class="file" style="width:50px;position: absolute;left: 0;top: 0;opacity: 0;"
										   @change="uploadFile($event)"/>
								</label>
							</div>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="col-md-10">
								<img width="80px" height="80px" style="margin-left:10px;margin-bottom: 5px"
									 v-for="img in imgList"
									 :src="img"/>
							</div>
						</div>

						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >备注：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="col-md-10">
								<textarea   v-model="expenditure.notes"
									   class="form-control"   placeholder="请输入备注:">
								</textarea>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" @click="saveOrUpdate()">保存</button>
				<button type="button" id="closeModal" class="btn btn-secondary" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>


<div class="modal fade" id="exampleModalLong1" tabindex="-1" style="z-index: 1100"  aria-labelledby="exampleModalLongTitle1" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content" style="width:170%">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle1" >{{modalTitle}}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">

				<div class="row">
					<!-- Styled Table Card-->
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
						<div class="card table-card">
							<div class="card-body">

								<table  class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
									<tr>
										<th style="font-size:20px">员工姓名:</th>
										<th>
											<select  class="form-control" v-model="employeeName">
												<option  value="">查看全部</option>
												<option v-for="obj in employeeList" :value="obj.name">{{obj.name}}</option>
											</select>
										</th>
										<th style="font-size:20px">项目：</th>
										<th>
											<select  class="form-control" v-model="projectName">
												<option  value="">查看全部</option>
												<option v-for="obj in projectList" :value="obj.name">{{obj.name}}</option>
											</select>
										</th>
										<th style="width:35%">
											<button type="button" class="btn btn-primary mt-2 mr-2" @click="getDetail">搜索</button>
											<button type="button" class="btn btn-primary mt-2 mr-2" @click="exportDetail">导出数据</button>
										</th>
									</tr>
								</table>

								<table  class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
									<thead style="font-size:25px">
									<tr align="center">
										<th>序号</th>
										<th>消费日期</th>
										<th>地区</th>
										<th>员工姓名</th>
										<th>项目</th>
										<th>金额</th>
									</tr>
									</thead>
									<tbody>
									<tr v-for="(obj,index) in expenditureDetailList" align="center" >
										<td style="font-size:25px">{{index+1}}</td>
										<td style="font-size:25px">{{obj.createTime | formatMonthDate}}</td>
										<td style="font-size:25px">{{obj.aname}}</td>
										<td style="font-size:25px">{{obj.uname}}</td>
										<td style="font-size:25px">{{obj.projectName}}</td>
										<td style="font-size:25px">{{obj.price | formatPrice}}</td>
									</tr>
									</tbody>
									<tfoot>
										<tr>
											<td style="font-size:25px" colspan="2">金额总计：</td>
											<td style="font-size:25px;color:red" colspan="4">{{sumDetailPrice}}</td>
										</tr>
									</tfoot>
								</table>


								<div class="card-body">
									<div class="int-blog-pagination">

										<ul class="pagination" style="width:40%;float: right" v-if="sumPageSize>7">
											<li class="page-item"><a class="page-link" @click="selectPage(-1)"><i class="fas fa-chevron-left"></i>上一页</a></li>
											<li class="page-item" v-for="index in pageCheckStartList" :id="index"><a class="page-link"  @click="clickPage(index)">{{index}}</a></li>

											<li class="page-item" v-if="pageCheck"><a class="page-link" href="javascript:;">...</a></li>
											<li class="page-item" v-for="index in pageCheckEndList" :id="index"><a class="page-link"  @click="clickPage(index)">{{index}}</a></li>
											<li class="page-item"><a class="page-link" @click="selectPage(1)">下一页 <i class="fas fa-chevron-right"></i></a></li>
										</ul>
										<ul class="pagination" style="width:40%;float: right" v-if="sumPageSize<7">

											<li class="page-item"><a class="page-link" @click="selectPage(-1)"><i class="fas fa-chevron-left"></i>上一页</a></li>
											<li class="page-item" v-for="index in sumPageSize" :id="index"><a class="page-link"  @click="clickPage(index)">{{index}}</a></li>
											<li class="page-item"><a class="page-link" @click="selectPage(1)">下一页 <i class="fas fa-chevron-right"></i></a></li>
										</ul>
									</div>
									<span style="font-size: 15px;font-weight: bold;line-height:60px;height: 60px;text-align: center;float: right">
											总数据为{{total}}条；
											共有{{sumPageSize}}页数据；
										</span>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary mt-2 mr-2" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>



<div class="modal fade" id="exampleModalLong0" tabindex="-1"  role="dialog" aria-labelledby="exampleModalLongTitle0" aria-hidden="true">
	<div class="modal-dialog" role="document" >
		<div class="modal-content" style="width:185%">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle0" >支出费用详情</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">

                <!-- Products view Start -->
				<div class="row">
                    <!-- Styled Table Card-->
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="card table-card">
                            <div class="card-body">
								<table  class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
									<tr>
<!--										<th style="font-size:25px">月份:</th>-->
<!--										<th>-->
<!--											<input data-date-format="yyyy-mm" style="width:60%"-->
<!--												   class="form-control" id="datepicker2">-->
<!--										</th>-->
										<th style="font-size:25px">地区：</th>
										<th>
											<select  class="form-control" v-model="areaName">
												<option  value="">查看全部</option>
												<option v-for="obj in areaList" :value="obj.name">{{obj.name}}</option>
											</select>
										</th>
										<th style="width:40%">
											<button type="button" class="btn btn-primary mt-2 mr-2" @click="selectList">搜索</button>
											<button type="button" class="btn btn-primary mt-2 mr-2" @click="exportExcel">导出数据</button>
<!--											<button type="button" class="btn btn-primary mt-2 mr-2" @click="getArchiving(1)">归档数据</button>-->
<!--											<button type="button" class="btn btn-primary mt-2 mr-2" @click="getArchiving(0)">未归档数据</button>-->
										</th>
									</tr>
								</table>
                               <table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
									<thead style="font-size:25px">
										<tr align="center">
											<th>序号</th>
											<th>消费日期</th>
											<th>地区</th>
											<th>支出金额</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(obj,index) in expenditureList" align="center">
											<td style="font-size:25px">{{index+1}}</td>
											<td style="font-size:25px">{{obj.createTime | formatDate}}</td>
											<td style="font-size:25px">{{obj.aname}}</td>
											<td style="font-size:25px">{{obj.price | formatPrice}}</td>
											<td>
												<div >
													<button type="button" class="btn btn-success mt-2 mr-2"
															@click="openDetail(obj.aid,obj.createTime)"

													>查看详情</button>
													<!--	data-toggle="modal" data-target="#exampleModalLong1"-->
												</div>
											</td>
										</tr>
									</tbody>

								   <tfoot>
								   <tr>
									   <td style="font-size:25px">金额总计：</td>
									   <td style="font-size:25px;color:red" colspan="4">{{sumPrice}}</td>
								   </tr>
								   </tfoot>
								</table>
                            </div>
                        </div>
                    </div>
                </div>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary mt-2 mr-2" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>




<!-- Products view Start -->
<div class="row">
	<!-- Styled Table Card-->
	<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
		<div class="card table-card">
			<div class="card-body">

				<table id="example1" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
					<thead style="font-size:25px">
					<tr align="center">
						<th>序号</th>
						<th>归档开始时间</th>
						<th>归档结束时间</th>
						<th>支出总金额</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					<tr v-for="(obj,index) in dataArchivingList" align="center">
						<td style="font-size:25px">{{index+1}}</td>
						<td style="font-size:25px">{{obj.startTime | formatMonthDate}}</td>
						<td style="font-size:25px">{{obj.endTime | formatMonthDate}}</td>
						<td style="font-size:25px">{{obj.totalFee | formatPrice}}</td>
						<td>
							<div >
								<button type="button" class="btn btn-success mt-2 mr-2"
										@click="openDataArchDetail(obj.id)"
										data-toggle="modal" data-target="#exampleModalLong0"
								>查看详情</button>
<!--								data-toggle="modal" data-target="#exampleModalLong0"-->
							</div>
						</td>
					</tr>
					</tbody>
				</table>


				<div class="card-body">
					<div class="int-blog-pagination">
										<span style="font-size: 20px;font-weight: bold;line-height:60px;height: 60px;text-align: center;float: right">
											共有{{dataArchTotal}}条数据；
											每页{{dataArchPageSize}}条数据；
											共有{{dataArchSumPageSize}}页数据；
										</span>
						<ul class="pagination" style="width:40%;float: right" v-if="dataArchPageSize>10">

							<li class="page-item"><a class="page-link" @click="selectDataArchPage(-1)"><i class="fas fa-chevron-left"></i>上一页</a></li>
							<li class="page-item" v-for="index in dataArchPageCheckStartList" :id="'p'+index"><a class="page-link"  @click="clickDataArchPage(index)">{{index}}</a></li>

							<li class="page-item" v-if="dataArchPageCheck"><a class="page-link" href="javascript:;">...</a></li>
							<li class="page-item" v-for="index in dataArchPageCheckEndList" :id="'p'+index"><a class="page-link"  @click="clickDataArchPage(index)">{{index}}</a></li>
							<li class="page-item"><a class="page-link" @click="selectDataArchPage(1)">下一页 <i class="fas fa-chevron-right"></i></a></li>
						</ul>
						<ul class="pagination" style="width:40%;float: right" v-if="dataArchSumPageSize<10">

							<li class="page-item"><a class="page-link" @click="selectDataArchPage(-1)"><i class="fas fa-chevron-left"></i>上一页</a></li>
							<li class="page-item" v-for="index in dataArchSumPageSize" :id="'p'+index"><a class="page-link"  @click="clickDataArchPage(index)">{{index}}</a></li>
							<li class="page-item"><a class="page-link" @click="selectDataArchPage(1)">下一页 <i class="fas fa-chevron-right"></i></a></li>
						</ul>
					</div>
				</div>


			</div>
		</div>
	</div>
</div>


<script src="../../../bootstrap/js/bootstrap-datepicker.min.js"></script>
<script src="../../../bootstrap/js/bootstrap-datepicker.zh-CN.min.js"></script>

<script>

	new Vue({
		el:"#app",
		data:{
			expenditureList:[],
			expenditureDetailList:[],
			total: 0,
			currentPage: 1,
			pageSize: 5,
			sumPageSize: 0,
			pageCheckStartList: [],
			pageCheck: true,
			pageCheckEndList: [],
			proList: [],
			modalTitle: '',
			projectVal:{},
			expenditure: {},
			areaList: [],
			projectList: [],
			areaName: '',
			searchDateTime: '',
			employeeName: '',
			projectName: '',
			imgList: [],
			detail: 0,
			sumPrice: 0,
			sumDetailPrice: 0,
			employeeList: [],
			aid: 0,
			searchDate: '',
			archiving: 1,
			dataArchivingList:[],
			dataArchTotal: 0,
			dataArchCurrentPage: 1,
			dataArchPageSize: 10,
			dataArchSumPageSize: 0,
			dataArchPageCheckStartList: [],
			dataArchPageCheck: true,
			dataArchPageCheckEndList: [],
			archId: 0
		},
		mounted:function (){
			this.getDataArchivingList()
			// this.selectList()
			// this.selectAreaList()
			// this.selectEmployeeList()
		},
		methods:{
			// getArchiving:function (archiving) {  //根据状态查询列表数据是归档还是未归档数据
			// 	this.archiving = archiving
			// 	this.selectList()
			// },
			getDataArchivingList:function () {  //查询归档后的数据
				axios.post(
						"/admin/dataArchiving/list/"+this.dataArchCurrentPage+"/"+this.dataArchPageSize
				).then(response=>{
					this.dataArchivingList = response.data.list
					this.dataArchTotal = response.data.total
					this.dataArchSumPageSize = Math.ceil(this.dataArchTotal / this.dataArchPageSize)
					if(this.dataArchSumPageSize>7){
						this.dataArchPageCheckStartList = []
						if(this.dataArchCurrentPage<(this.dataArchPageSize-4)){
							for (let i = this.dataArchCurrentPage; i < this.dataArchCurrentPage+3; i++) {
								this.dataArchPageCheckStartList.push(i)
							}
							this.dataArchPageCheck = true
						}else{
							for (let i = this.dataArchSumPageSize-5; i < this.dataArchSumPageSize-2; i++) {
								this.dataArchPageCheckStartList.push(i)
							}
							this.dataArchPageCheck = false
						}
						this.dataArchPageCheckEndList = []
						for (let i = this.dataArchSumPageSize-3; i < this.dataArchSumPageSize; i++) {
							this.dataArchPageCheckEndList.push(i+1)
						}
					}
					setTimeout(() => {
						this.addDataArchClass()
					}, 150)
				})
			},
			clickDataArchPage:function (index){
				this.dataArchCurrentPage = index
				this.getDataArchivingList()
			},
			selectDataArchPage:function (index){
				this.dataArchCurrentPage = this.dataArchCurrentPage + index
				if(this.dataArchCurrentPage<=1){
					this.dataArchCurrentPage=1
				}
				if(this.dataArchCurrentPage>this.dataArchSumPageSize){
					this.dataArchCurrentPage = this.dataArchSumPageSize
				}
				this.getDataArchivingList()
			},
			addDataArchClass:function (){
				for (let i = 0; i <= this.dataArchSumPageSize; i++) {
					$("#p"+i).removeClass("active");
				}
				$("#"+(this.dataArchCurrentPage)).addClass("active");
			},
			openDataArchDetail:function (archId){
				this.archId = archId
				this.selectList()
				this.selectAreaList()
				this.selectEmployeeList()
				// $('#exampleModalLong0').modal('show');
			},
			selectList:function () {
				// let date = new Date()
				// if($("#datepicker2").val()!=''){
				// 	date = new Date($("#datepicker2").val())
				// }
				// let month = date.getMonth()+1;
				// if(month<10){
				// 	month = "0"+month
				// }
				// let searchDate = date.getFullYear()+"-"+month+"-01"
				axios.get(
						// "/admin/expenditure/statistics/list?searchDate="+searchDate+"&areaName="+this.areaName
						"/admin/expenditure/statistics/list?areaName="+this.areaName+"&archId="+this.archId
				).then(response=>{
					this.expenditureList = response.data
					this.sumPrice = 0
					for (let i = 0; i < this.expenditureList.length; i++) {
						this.sumPrice +=this.expenditureList[i].price
					}
					let priceStr = this.sumPrice+''
					this.sumPrice = priceStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
				})
			},
			selectPage:function (index){
				this.currentPage = this.currentPage + index
				if(this.currentPage<=1){
					this.currentPage=1
				}
				if(this.currentPage>this.sumPageSize){
					this.currentPage = this.sumPageSize
				}
				this.getDetail()
			},
			clickPage:function (index){
				this.currentPage = index
				this.getDetail()
			},
			addClass:function (){
				for (let i = 0; i <= this.sumPageSize; i++) {
					$("#"+i).removeClass("active");
				}
				$("#"+(this.currentPage)).addClass("active");
			},
			exportExcel:function (){
				let date = new Date()
				if($("#datepicker2").val()!=''){
					date = new Date($("#datepicker2").val())
				}
				let month = date.getMonth()+1;
				if(month<10){
					month = "0"+month
				}
				let searchDate = date.getFullYear()+"-"+month+"-01"
				window.location.href="/admin/expenditure/statistics/list/export?searchDate="+searchDate+"&areaName="+this.areaName
			},
			selectAreaList:function () {
				axios.get(
						"/admin/area/selectListAll"
				).then(response=>{
					this.areaList = response.data
				})
			},
			selectAreaById:function (aid) {
				axios.get(
						"/admin/area/findById/"+aid
				).then(response=>{
					this.projectList = JSON.parse(response.data.projectList)
				})
			},
			selectEmployeeList(){
				axios.get(
						"/admin/employee/getList"
				).then(response=>{
					this.employeeList = response.data
				})
			},
			openEdit:function(id){
				this.detail = 0
				this.modalTitle = "修改"
				this.expenditure = {}
				this.selectPro()

				axios.get(
						"/admin/expenditure/findById/"+id,
				).then(response=>{
					this.expenditure = response.data
					this.projectVal.id = this.expenditure.projectId
					this.projectVal.name = this.expenditure.projectName
					this.imgList = this.expenditure.imgList
					$("#datepicker").val(this.formatDateVal(this.expenditure.createTime))
					$("#datepicker1").text(this.formatDateVal(this.expenditure.createTime))
					console.log(this.expenditure)
				})
			},
			openDetail:function (aid,searchDate){
				this.modalTitle = "详情"
				this.detail = 1
				let date = new Date(searchDate)
				this.searchDate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+(date.getDay()+1)
				this.aid = aid
				this.getDetail()

				$('#exampleModalLong1').modal('show');
			},
			getDetail:function (){
				axios.get(
						"/admin/expenditure/statistics/detail/"+this.currentPage+"/"+this.pageSize+"/"+this.aid+"/"+this.searchDate+"?employeeName="+this.employeeName+"&projectName="+this.projectName+"&archiving="+this.archiving,
				).then(response=>{
					this.expenditureDetailList = response.data.list
					this.total = response.data.total
					this.sumDetailPrice = 0
					for (let i = 0; i < this.expenditureDetailList.length; i++) {
						this.sumDetailPrice +=this.expenditureDetailList[i].price
					}
					let priceStr = this.sumDetailPrice+''
					this.sumDetailPrice = priceStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

					this.selectAreaById(this.aid)
					// this.expenditure = response.data
					// this.projectVal.id = this.expenditure.projectId
					// this.projectVal.name = this.expenditure.projectName
					// this.imgList = this.expenditure.imgList
					// $("#datepicker").val(this.formatDateVal(this.expenditure.createTime))
					// $("#datepicker1").text(this.formatDateVal(this.expenditure.createTime))
					// console.log(this.expenditure)

					// 以下是处理分页
					this.sumPageSize = Math.ceil(this.total / this.pageSize)
					if(this.sumPageSize>7){
						this.pageCheckStartList = []
						if(this.currentPage<(this.sumPageSize-4)){
							for (let i = this.currentPage; i < this.currentPage+3; i++) {
								this.pageCheckStartList.push(i)
							}
							this.pageCheck = true
						}else{
							for (let i = this.sumPageSize-5; i < this.sumPageSize-2; i++) {
								this.pageCheckStartList.push(i)
							}
							this.pageCheck = false
						}
						this.pageCheckEndList = []
						for (let i = this.sumPageSize-3; i < this.sumPageSize; i++) {
							this.pageCheckEndList.push(i+1)
						}
					}
					//this.addClass()
					setTimeout(() => {
						this.addClass()
					}, 150)

				})
			},
			exportDetail:function (){
				window.location.href = "/admin/expenditure/statistics/detail/export/"+this.aid+"/"+this.searchDate+"?employeeName="+this.employeeName+"&projectName="+this.projectName
			},
			openAdd:function(){
				this.modalTitle = "添加"
				this.expenditure = {}
				this.selectPro()
			},
			selectPro:function (){
				axios.get(
						"/staff/project/list"
				).then(response=>{
					this.proList = response.data
				})
			},
			saveOrUpdate:function (){
				this.expenditure.projectId = this.projectVal.id
				this.expenditure.projectName = this.projectVal.name
				this.expenditure.createTime = $("#datepicker").val()
				this.expenditure.imgList = this.imgList
				this.expenditure.price = parseInt(this.expenditure.price)
				axios.post("/admin/expenditure/saveOrUpdate",this.expenditure).then(response=>{
					$("#closeModal").click()
					this.selectList()
				})
			},
			delById:function (id){
				axios.get("/admin/expenditure/deleteById/"+id).then(response=>{
					this.selectList()
				})
			},
			updateStatus:function (id,status){
				axios.get("/admin/expenditure/updateStatus/"+id+"/"+status).then(response=>{
					this.selectList()
				})
			},
			uploadFile:function (val){
				console.log(val.target.files[0].name)
				const form=new FormData();
				form.append("imgFile",val.target.files[0]);
				axios.post("/staff/project/uploadFile",form).then(response=>{
					console.log(response.data);
					this.imgList.push("https://www.krwl.top/img/"+response.data)
				})
			},
			formatDateVal(value) {
				let date = new Date(value)
				return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
			}
		},
		filters: {
			formatDate(value) {
				let date = new Date(value)
				// return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
				return date.getFullYear()+"-"+(date.getMonth()+1);
			},
			formatMonthDate(value) {
				let date = new Date(value)
				return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
				// return date.getFullYear()+"-"+(date.getMonth()+1);
			},
			formatPrice(price){
				let priceStr = price+''
				const thousandSeparated = priceStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
				return thousandSeparated;
			}
		}
	});

	$('#datepicker').datepicker({
		weekStart: 1,
		daysOfWeekHighlighted: "6,0",
		autoclose: true,
		todayHighlight: true,
		language: "zh-CN"
	});
	$('#datepicker').datepicker("setDate", new Date());

	$('#datepicker2').datepicker({
		// weekStart: 1,
		format: 'yyyy-mm',
		startView: 1,
		// daysOfWeekHighlighted: "6,0",
		autoclose: true,
		maxViewMode: 2,
		minViewMode: 1,
		//todayHighlight: true,
		language: "zh-CN"
	});
	$('#datepicker2').datepicker("setDate", new Date());


</script>

